<template>
    <div class="up_load_wrap" @touchmove.prevent>
        <div class="select_type_wrap">
          <div>
            <p @click="select_pat">拍照</p>
            <p @click="select_book">相册选择</p>
            <p @click="cancle_up">取消</p>
          </div>
        </div>
        <input style="display: none" @change="selectImg" type="file" capture="camera" accept="image/*" ref="file_input">
    </div>
</template>

<script>
    import back from 'components/back'
    import {stop_slider} from 'assets/base/base'
    import {get_cookie} from 'assets/cookie/cookie'
    import {get_order_detial} from 'api/order'

    export default {
        name: "up-load-img",
        data() {
            return {}
        },
        created() {

        },
        activated() {
        },
        computed: {},
        methods: {
          selectImg(){
            if(this.$refs.file_input.files.length>0){
              console.log(this.$refs.file_input.files[0])
              this.huoqu_url(this.$refs.file_input.files[0])
            }else{
              this.$emit('get_imgSrc','')
            }
          },
          huoqu_url(file) {
            this.$emit('cancle_up','hasImg')
            let form_reader = new FileReader();
            form_reader.onloadend= (e)=> {
              form_reader=null;
              this.$emit('get_imgSrc',e.target.result)
              file=null;
            };
            form_reader.readAsDataURL(file);

          },
          select_pat(){
            this.$refs.file_input.setAttribute("capture","camera")
            this.$refs.file_input.click()
          },
          select_book(){
            this.$refs.file_input.removeAttribute("capture")
            this.$refs.file_input.click()
          },
          cancle_up(){
            this.$emit('cancle_up')
          }
        },
        components: {
            back
        }
    }
</script>

<style scoped lang="scss">
    .up_load_wrap {
        position: fixed;
        background-color: rgba(0,0,0,0.3);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }
    .select_type_wrap{
      width: 100%;
      height: 100%;
      >p{
        width: 60%;
        margin: 10px auto;
        padding-top: 100%;
        position: relative;
        >img{
          width: 100%;
          z-index: -1;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
      }
      >div{
        position: absolute;
        bottom: 10px;
        width: 100%;
        >p:nth-child(1){
          border-bottom: 1px solid #ddd;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
        >p:nth-child(2){
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          margin-bottom: 10px;
        }
        >p:nth-child(3){
          border-radius: 5px;
        }
        >p{
          width: 90%;
          margin: 0 auto;
          background-color: #fff;
          color: #1aaaeb;
          text-align: center;
          height: 43px;
          line-height: 43px;
          font-size: 14px;
        }
      }
    }
</style>
